<template>
  <div>
    <el-row class="tigan">
      试题题干：
      <div class="editorBox">
        <TinymceEditor ref="editor" v-model="modelValue.subjectEditorValue" :height="200" />
      </div>
    </el-row>
    <el-row
      class="hoverOptions pt10 pb10"
      v-for="(item,i) in modelValue.options"
      :key="item.optionUuid"
    >
      <el-col :span="1" class="center">{{i+1}}.</el-col>
      <el-col :span="19">
        <TinymceEditor v-model="item.optionTextValue" :height="50" />
      </el-col>
      <el-col :span="3" class="center">
        正确顺序:
        <el-select style="width:40%" v-model="item.optionPaiXuValue">
          <el-option
            style="width:40%"
            v-for="(item,i) in modelValue.options.length"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-col>
      <el-col :span="1" class="center">
        <el-tooltip effect="light" content="删除" placement="top-start">
          <el-icon class="feedbackIcon" @click="danxuanClearOpt(i)">
            <Delete />
          </el-icon>
        </el-tooltip>
      </el-col>
    </el-row>
    <div class="tigan"></div>
    <el-row style="padding-top:6px">
      <el-col :span="24">
        <el-button type="primary" plain :icon="Plus" text @click="danxuanAddOpt">添加选项</el-button>
        <el-button type="primary" :icon="Plus" text @click="addAnalysis" plain>添加试题解析</el-button>
      </el-col>
    </el-row>
    <el-row
      v-if="modelValue.explainEditorShow||modelValue.explainEditorValue.length>0"
      class="jiexi2"
    >
      <el-col :span="2" class="center">试题解析:</el-col>
      <el-col :span="19">
        <TinymceEditor v-model="modelValue.explainEditorValue" :height="80" />
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { getCurrentInstance, toRefs, ref, reactive, onMounted, onBeforeUnmount, watch } from 'vue'
import {
  CirclePlus,
  Plus,
  CloseBold,
  ArrowDownBold,
  Document,
  View,
  Delete,
  Edit,
} from '@element-plus/icons-vue'
import { ElLoading, ElMessageBox, ElMessage } from "element-plus";
import { uuid } from 'vue3-uuid'
import TinymceEditor from '../component/Editor/index.vue'
const emit = defineEmits(['update:modelValue'])
const props = defineProps({
  modelValue: {
    type: [String, Object, Array],
    default: null,
  },
})
const addAnalysis = () => {
  //添加试题解析
  props.modelValue.explainEditorShow = !props.modelValue.explainEditorShow
  props.modelValue.explainEditorValue = ''
}
const danxuanAddOpt = () => {
  props.modelValue.options.push({
    optionUuid: uuid.v4(),
    optionIndex: props.modelValue.options.length + 1,
    optionTipEditorValue: '',
    optionTextValue: '',
    optionPaiXuValue: '1',
  })
}
const danxuanClearOpt = (i) => {
  if (props.modelValue.options.length == 1)
    return ElMessage.error('已达到最少数量！')
  props.modelValue.options.splice(i, 1)
  sortIndex()
}
const sortIndex = () => {
  //选项重新排序
  props.modelValue.options.forEach((item, i) => {
    item.optionIndex = i + 1
  })
}
watch(
  () => props.modelValue,
  (newVal, oldVal) => {
    emit('update:modelValue', newVal)
  },
  { deep: true }
)
</script>

<style scoped>
.tigan {
  border-bottom: 1px dashed #dcdfe8;
  padding-bottom: 20px;
  margin-bottom: 10px;
}
.center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.hoverOptions:hover .feedbackIcon {
  color: #409eff !important;
}
</style>